<template>
  <div class="app-container d-flex">
    <div class="h-100 w-12">
      <!-- 宿舍区负载查询 -->
      <div class="h-100 w-100 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="item_title">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-white font-14">宿舍区负载查询</div>
            </div>
          </div>
          <div class="item_content">
            <div class="height-20 w-100">
              <el-form size="medium" :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="区域:">
                  <el-cascader
                    v-model="formInline.user"
                    placeholder="选择区域"
                    :options="options"
                    :props="{ checkStrictly: true, label: 'name' }"
                    clearable></el-cascader>
                </el-form-item>
                <el-form-item label="日期">
                  <el-date-picker
                    v-model="formInline.day"
                    :default-time="['00:00:00', '00:00:00']"
                    :picker-options="pickerOptions"
                    @change="handleTimeChange"
                    format="yyyy/MM/dd HH"
                    value-format="yyyy-MM-dd HH:00:00"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
              </el-form>
            </div>
            <div class="height-80 w-100" id="line-first"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import charts from './chart.js'
  import {
    queryItemsList,
  } from "@/api/user"

  export default {
    components: {},
    data() {
      return {
        timeout: [],

        formInline: {},

        oneCarData: {
          xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          seriesData1: [120, 132, 101, 134, 90, 230, 210],
          seriesData2: [220, 182, 191, 234, 290, 330, 310],
          seriesData3: [150, 232, 201, 154, 190, 330, 410],
        },
        twoCardData: {
          xData: [],
          seriesData1: [],
          seriesData2: [],
          seriesData3: [],
        },
        options: [],

        pickerOptions: {
          disabledDate(time) {
            const now = Date.now();
            const seven = 7 * 24 * 60 * 60 * 1000;
            const sevenDays = now - seven;
            return time.getTime() > Date.now() - 8.64e7 || time.getTime() < sevenDays; // 不可选今天之后的日期
          }
        }
      }
    },
    created() {
      this.queryItemsList()
    },
    mounted() {
      setTimeout(() => {
        this.queryOneListHistoryByReport()
        // this.queryTwoListHistoryByReport()
      }, 500)
      // let _this = this;
      // this.timeout[0] = setInterval(() => {
      //   _this.queryOneListHistoryByReport()
      //   _this.queryTwoListHistoryByReport()
      // }, 30000);
    },
    beforeDestroy() {
      if (this.timeout.length > 0) {
        this.timeout.forEach(item => {
          clearInterval(item);
        })
      }
    },
    methods: {
      queryItemsList() {
        queryItemsList().then(res => {
          this.options = res.object || []
        })
      },
      getDay(day) {
        const now = new Date();
        now.setTime(now.getTime() + day * 3600 * 1000 * 24);
        return this.formatDate(now);
      },
      formatDate(date) {
        // 格式化日期为字符串
        const y = date.getFullYear();
        const m = date.getMonth() + 1;
        const d = date.getDate();
        const h = date.getHours();
        const mm = date.getMinutes();
        const s = date.getSeconds();
        return `${y}-${m}-${d} ${h}:${mm}:${s}`;
      },
      handleTimeChange(value) {
        if (value && value.length === 2) {
          const startTime = new Date(value[0]).getTime()
          const endTime = new Date(value[1]).getTime()

          if (endTime - startTime < 6 * 60 * 60 * 1000) { // 6小时的毫秒数
            this.$message.error('结束时间必须晚于开始时间6小时');
            // 重置时间范围
            this.formInline.day = [];
          }
        }
      },
      queryOneListHistoryByReport() {
        // queryOneListHistoryByReport().then(res => {
        //   let tempData = res.object
        //
        //   let xData = []
        //   let seriesData = []
        //
        //   for (let i = 0; i < tempData.length; i++) {
        //     xData.push(tempData[i].xValue)
        //     seriesData.push(tempData[i].yValue)
        //   }
        //
        //   this.oneCarData.xData = xData
        //   this.oneCarData.seriesData = seriesData
        //
        //   charts.oneLineEchart('line-first', this.oneCarData)
        // })

        charts.lineEchart('line-first', this.oneCarData)
      }
      ,


      onSubmit() {
        console.log(this.formInline.day)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .height-20 {
    height: 10%;
  }

  .height-80 {
    height: 90%;
  }

  .item_title {
    width: 100%;
    height: 5%;
  }

  .item_content {
    width: 100%;
    height: 95%;
  }

  ::v-deep.el-form-item--medium .el-form-item__label {
    color: #ffffff !important;
    font-family: Source Han Sans CN, Source Han Sans CN-500;
    font-weight: 500;
  }

  ::v-deep.el-button--primary {
    /*color: #fff;*/
    /*background-color: #1A2F2D;*/
    /*border-color: #1A2F2D;*/
  }

  .font-white {
    font-family: Source Han Sans CN, Source Han Sans CN-500;
    font-weight: 500;
    color: #ffffff;
  }
</style>
